<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="">
  <meta name="format-detection" content="telephone=no">
  <meta name="full-screen" content="yes">
  <meta name="x5-page-mode" content="app">
  <meta name="x5-fullscreen" content="true">
  <meta name="browsermode" content="application">
  <meta content="" name="keywords">
  <meta content="" name="description">
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="./js/layer_mobile/need/layer.css">
  <link rel="stylesheet" href="./css/style.css">
  <title>支付</title>
</head>
<body>
  <div class="page__hd">
    <div class="page__title">支付</div>
    <div class="page__desc">向 <span class="theme-color">天空文化传播</span> 支付</div>
  </div>
  <div class="weui-cells weui-cells_form">
    <div class="weui-cell">
      <div class="weui-cell__bd">
        <input id='fee' class="weui-input" type="number" placeholder="请输入支付金额（元）">
      </div>
    </div>
  </div>
  <button class="weui-btn weui-btn_primary submit-btn" id="pay-btn">支付</button>


  <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
  <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
  <script src="./js/tools.js?ver=2.1"></script>
  <script src="./js/jweixin-1.4.0.js?ver=3.0"></script>
  <script src="./js/wechat.js?ver=2.22"></script>
  <script src="./js/layer_mobile/layer.js"></script>
  <script>
    // var vConsole = new VConsole();
    $(function() {
      // 点击支付
      $('#pay-btn').on('click', function() {
        WXpay();
      });
    });

    wx.ready(function() {
      wechat.shareTimeline()
      wechat.shareAppMessage()
    })

    // 支付
    function WXpay() {
      var fee = Number($('#fee').val());
      if(!fee) {
        layer.open({ content: '请输入支付金额', skin: 'msg', time: 2 });
        return
      }

      $.post('http://dev.cnskycc.club/index/pay/create_order', {
        title: "向天空文化传播支付",
        fee: fee,
        open_id: tools.getItem('userInfo').open_id
      }).success(function(res) {
        if(res.code === 0) {
          var data = JSON.parse(res.js_api)
          wx.chooseWXPay({
            timestamp: data.timeStamp,
            nonceStr: data.nonceStr,
            package: data.package,
            signType: data.signType,
            paySign: data.paySign,
            success: function (data) {
              getOrder(res.out_trade_no)
            }
          });
        } else {
          layer.open({ content: res.msg, skin: 'msg', time: 2 })
        }
      }).error(function(err) {
        if(err.status === 403) {
          tools.wxLogin();
        } else {
          layer.open({ content: '网络连接出错', skin: 'msg', time: 2 })
        }
      })
    }

    function getOrder(order) {
      tools.ajax({
        url: '/index/pay/query_order',
        data: {
          out_trade_no: order
        },
        success: function(res) {
          layer.open({ content: res.msg, skin: 'msg', time: 2 })
        }
      })
    }
  </script>
</body>
</html>